<template>
  <div class="log-box">
    <van-tabs v-model:active="active" @click-tab="checkoutTab">
      <van-tab title="我的团队" name="1">
        <van-list
            v-model:loading="teamLoading"
            :finished="teamFinished"
            finished-text="没有更多了"
            @load="onTeamLoad"
        >
          <div class="team-head">
            <span style="width: 40%;">地址</span>
            <span style="width: 40%;">邀请时间</span>
            <span style="width: 20%;">数量</span>
          </div>
          <div class="team-list">
            <div class="list-card" v-for="(item, index) in teamLists" :key="index">
              <span style="width: 40%">{{ textSubstr(item.wallet_address, 4) || '--' }}</span>
              <span style="width: 40%">{{ item.create_time || '--' }}</span>
              <span style="width: 20%">{{ item.user_money || '--' }}USDT</span>
            </div>
          </div>
        </van-list>
      </van-tab>
      <van-tab title="我的直推" name="2">
        <van-list
            v-model:loading="teamLoading"
            :finished="teamFinished"
            finished-text="没有更多了"
            @load="onTeamLoad"
        >
          <div class="team-head">
            <span style="width: 40%;">地址</span>
            <span style="width: 40%;">邀请时间</span>
            <span style="width: 20%;">数量</span>
          </div>
          <div class="team-list">
            <div class="list-card" v-for="(item, index) in teamLists" :key="index">
              <span style="width: 40%">{{ textSubstr(item.wallet_address, 4) || '--' }}</span>
              <span style="width: 40%">{{ item.create_time || '--' }}</span>
              <span style="width: 20%">{{ item.user_money || '--' }}USDT</span>
            </div>
          </div>
        </van-list>
      </van-tab>
      <van-tab title="我的间推" name="3">
        <van-list
            v-model:loading="teamLoading"
            :finished="teamFinished"
            finished-text="没有更多了"
            @load="onTeamLoad"
        >
          <div class="team-head">
            <span style="width: 40%;">地址</span>
            <span style="width: 40%;">邀请时间</span>
            <span style="width: 20%;">数量</span>
          </div>
          <div class="team-list">
            <div class="list-card" v-for="(item, index) in teamLists" :key="index">
              <span style="width: 40%">{{ textSubstr(item.wallet_address, 4) || '--' }}</span>
              <span style="width: 40%">{{ item.create_time || '--' }}</span>
              <span style="width: 20%">{{ item.user_money || '--' }}USDT</span>
            </div>
          </div>
        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script setup>
import {onMounted, ref} from 'vue';
import req from '@/libs/req';
import {textSubstr, sliceDecimal, formatNum} from '@/libs/utlis.js';

const active = ref(1);
const teamLists = ref([]);
const teamLoading = ref(false);
const teamFinished = ref(false);

// 点击切换tab栏
const checkoutTab = () => {
  teamLists.value = [];
  onTeamLoad();
}
// 我的团队获取数据
const onTeamLoad = async () => {
  const res = await req.post('Index/tanlist', {
    type: active.value,
    page_size: 10,
    page_no: 1
  })
  teamLists.value.push(...res.list);
  teamLoading.value = false;
  if (teamLists.value.length >= res.count) {
    teamFinished.value = true;
  }
}
</script>
<style scoped lang="scss">
.team-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  color: #F7AC15;
  text-align: center;
}

.team-list {
  .list-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: center;
    font-size: 14px;
    color: #f6f6f6;
    margin-top: 24px;
  }
}

:deep(.van-tabs__wrap) {
  height: auto;
  padding: 31px 12px 6px;
  margin: 0 15px 23px;
}

:deep(.van-tabs__nav) {
  background-color: #1E1E1E;
  border-radius: 30px;
}

:deep(.van-tab--active) {
  color: #010101;
  padding: 6px 12px;
  background: linear-gradient(0deg, #EBFC8C 0%, #ACEAA7 100%);
  border-radius: 30px;
}

:deep(.van-tabs__line) {
  display: none;
}
</style>